<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        /*

                遍历
                    1. js的遍历方式
                     * for(初始化值;循环结束条件;步长)
                    2. jq的遍历方式
                        1. jq对象.each(callback)
                        2. $.each(object, [callback])
                        3. for..of:jquery 3.0 版本之后提供的方式

        */

        $(function () {
            // 1.获取所有的ul下的li
            // let js = document.getElementsByClassName("1");
            // alert(js.length);
            let citys = $("#city li");

            //2.遍历li
            // for (let i = 0; i < citys.length; i++) {
            //     // 获取内容
            //
            //     if("上海" == citys[i].innerHTML){
            //         // break;
            //         // continue; //结束本次循环，继续下次循环
            //     }
            //     alert(i + ":" + citys[i].innerHTML);
            // }


            // 1. jq对象.each(callback)
            // citys.each(function (index,element) {
            //     //3.1 获取li对象 第一种方式 this
            //     // alert(this.innerHTML);
            //     // alert($(this).html());
            //     //3.2 获取li对象 第二种方式 在回调函数中定义参数   index（索引） element（元素对象）
            //     // alert(index+":"+element.innerHTML);
            //
            //     //判断如果是上海，则结束循环
            //     if("上海" == $(element).html()){
            //         // break报错！
            //         //如果当前function返回为false，则结束循环(break)。
            //         //如果返回为true，则结束本次循环，继续下次循环(continue)
            //         return true;
            //     }
            //     alert(index+":"+$(element).html());
            //
            // })

            // 3 $.each(object, [callback])
            //  $.each(citys,function () {
            //      alert($(this).html());
            //  });


            //4. for ... of:jquery 3.0 版本之后提供的方式

            // 变量名称 of 遍历对象
            for(li of citys){
                alert($(li).html());
            }
        });

    </script>
</head>
<body>
<ul id="city">
    <li class="1">北京</li>
    <li class="1">上海</li>
    <li class="1">天津</li>
    <li class="1">重庆</li>
</ul>
</body>
</html>
